<template>
    <div class="content" v-loading="loading">
        <!-- 表单头 -->
        <div class="header-setting">
            <!-- 面包屑 -->
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>收费管理</a-breadcrumb-item>
                <a-breadcrumb-item>责任区列表</a-breadcrumb-item>
            </a-breadcrumb>
            <!-- 输入框 -->
            <div class="box-select">
                <div class="item-select">
                    <div class="text-key">停车场</div>
                    <a-select
                            style="margin-left: 50px; width: 200px"
                            showSearch
                            placeholder="选择停车点"
                            optionFilterProp="children"
                            @change="selectChanged"
                            v-model="selectParkId"
                            :allowClear="true">
                        <a-select-option v-for="i in parks" :key="i.id" :value="i.id">
                            {{i.parkName}}
                        </a-select-option>
                    </a-select>
                </div>
                <div class="item-select">
                    <div class="text-key">负责人姓名</div>
                    <a-select
                            style="margin-left: 50px; width: 200px"
                            showSearch
                            placeholder="选择责任人"
                            optionFilterProp="children"
                            @change="parkChange"
                            v-model="controllerName"
                            :allowClear="true">
                        <a-select-option v-for="m in parkManagerList" :key="m.userId" :value="m.userId">
                            {{m.nickName}}
                        </a-select-option>
                    </a-select>
                </div>
            </div>
        </div>
        <!-- 表单 -->
        <div class="list">
            <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination"
                     size="small" @change="tableChange"/>
        </div>
    </div>
</template>

<script>

    const columns = [
        {title: '序号', dataIndex: 'no', width: '5%'},
        {title: '停车点ID', dataIndex: 'parkId', width: '11%'},
        {title: '停车点名称', dataIndex: 'parkName', width: '11%'},
        {title: '责任人姓名', dataIndex: 'nickName', width: '11%',},
        {title: '责任人手机号码', dataIndex: 'phoneNum', width: '11%',},
        {title: '时间', dataIndex: 'createdTime', width: '11%',},
    ];


    /* API */
    import ParkingRecord from '../../api/ParkingRecord';
    import PerConfig from '../../api/system/ParkApi'
    import CommonApi from "../../api/CommonApi";

    export default {
        name: "responsibility",

        data() {
            return {
                parks: [],
                /* 条件 */
                selectParkId: [],
                controllerName: [],
                /* 表单 */
                columns,
                dataSource: [],
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    current: 1,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },
                /*  */
                parkManagerList: [],
                loading:false
            }
        },

        mounted() {
            this.queryData();
            this.initParkList()
            this.initParkManager();
        },

        methods: {

            /* -------------------- 初始化停车点 -------------------- */
            initParkList() {
                CommonApi.getParkList()
                    .then((data) => {
                        this.parks = data.data;
                    })
                    .catch(err => {
                        console.log("error:", err);
                    });
            },

            initParkManager() {
                ParkingRecord.getParkManagerList({parkId: ""})
                    .then((data) => {
                        this.parkManagerList = data.data;
                    })
                    .catch(err => {
                        this.$message.error("获取停车管理人员失败:"+err);
                    })
            },

            /* -------------------- 查询列表 -------------------- */
            queryData(page) {
                this.loading = true;
                let condition = this.getQueryCondition();
                condition.curr = page || 1;
                this.getParkControllerList(condition);
            },

            getParkControllerList(condition) {
                PerConfig.getControllerList(condition)
                    .then(data => {
                        let {list, total, pageNum, pageSize} = data.data
                        let array = list || [];
                        array = array.map((item, index) => {
                            return {...item, no: total - (pageNum - 1) * pageSize - index}
                        })
                        this.dataSource = array;
                        this.pagination.total = total;
                        this.pagination.current = pageNum;
                        this.loading = false;
                    })
                    .catch(error => {
                        this.$message.log(error.msg);
                        this.loading = false;
                    })
            },

            /* -------------------- 参数初始化 -------------------- */
            getQueryCondition() {
                return {
                    parkID: this.selectParkId || '',
                    userId: this.controllerName || "",
                    limit: 10,
                };
            },

            selectChanged() {
                this.queryData();
            },

            parkChange() {
                this.queryData();
            },

            /* -------------------- 表单 -------------------- */
            tableChange(page) {
                this.queryData(page.current);
            }
        }
    }
</script>

<style scoped>
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: auto;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    .header-setting .box-select {
        display: flex;
        padding: 20px;
    }

    .header-setting .item-select {
        margin-left: 50px;
        display: flex;
        align-items: center;
    }

    .header-setting .item-select .text-key {

    }

    .list {
        margin-top: 5px;
        background: #fff;
        padding: 20px;
    }
</style>
